<template>
    <div :class="[messageBoxInfo.info.show?'show':'']"
         class="cbl-message-box flex align-items-center justify-content-center">
        <div class="message-container">
            <div class="header">{{messageBoxInfo.info.title}}</div>
            <div class="body">{{messageBoxInfo.info.content}}</div>
            <div class="footer" v-if="messageBoxInfo.info.showCancelBtn||messageBoxInfo.info.showConfirmBtn">
                <el-button type="default" @click="cancelClick" v-if="messageBoxInfo.info.showCancelBtn">
                    {{messageBoxInfo.info.cancelBtnText||'取消'}}
                </el-button>
                <el-button type="primary" @click="confirmClick" v-if="messageBoxInfo.info.showConfirmBtn">
                    {{messageBoxInfo.info.confirmBtnText||'确认'}}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import {defineProps, defineEmits} from 'vue';

    const messageBoxInfo = defineProps({
        info: {}
    });

    const emits = defineEmits(['confirmClick', 'cancelClick']);

    const confirmClick = () => {
        emits('confirmClick');
    };

    const cancelClick = () => {
        emits('cancelClick');
    };

</script>

<style scoped lang="less">
    .cbl-message-box {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
        display: none;

        &.show {
            display: flex;
        }

        .message-container {
            background: #fff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 5px;
            min-width: 400px;
            padding-bottom: 15px;

            .header {
                padding: 10px 15px;
            }

            .body {
                padding: 10px 15px;
                color: #909399;
                font-size: 14px;
            }

            .footer {
                padding: 10px 15px;
                text-align: center;
            }
        }
    }
</style>